<!--  -->
<template>
  <div class="thisPage evluation" style="position:relative">
    <div class="pageTitle" style="">数据汇聚</div>
    <div class="topBanner"></div>
    <component :is="activeProp" class="allComponent"></component>
  </div>
</template>

<script>
const files = require.context("./pages", false, /\.vue$/);
var comObj = {};
files.keys().forEach(fileName => {
  // 获取文件名
  var names = fileName
    .split("/")
    .pop()
    .replace(/\.\w+$/, "");
  // 获取组件配置
  const componentConfig = files(fileName);
  // 若该组件是通过"export default"导出的，优先使用".default"，否则退回到使用模块的根
  comObj[names] = componentConfig.default || componentConfig;
});
export default {
  components: { ...comObj },
  data() {
    return {
      stateList: [
        { lable: "实验", prop: "page" },
        { lable: "教学", prop: "page1" },
        { lable: "测评", prop: "page2" },
        { lable: "业务", prop: "page3" }
      ],
      activeProp: "page"
    };
  },
  mounted() {},
  computed: {},
  watch: {},
  methods: {
    itemStateClick(it) {
      this.activeProp = it.prop;
    }
  },
  created() {}
};
</script>
<style  src="../../../style/style.less" scoped></style>
<style  src="../../../style/sjhj.less" ></style>
<style lang="less">
.evluation {
  background: #141935;
  height: 100%;
  overflow: auto;
  width: 100%;
  .evluationTitle {
    position: absolute;
    z-index: 9999;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    color: #06ffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.topBanner {
  height: 105px;
  background: url("/static/B1/homePage/evaluation/top.png") no-repeat center;
  background-size: 100% 100%;
  position: relative;
}
.itmeLeft,
.itmeRight {
  position: absolute;
  // top: 58%;
}
.itmeLeft {
  left: 1%;
  width: 30%;
}
.itmeRight {
  right:0.8%;
  width: 30%;
}
.itemState {
  cursor: pointer;
  display: inline-block;
  background: url("/static/B1/homePage/evaluation/tab-left.png") no-repeat
    center;
  background-size: 100% 100%;
  color: white;
  // width: 260px;
  width: 50%;
  text-align: center;
  line-height: 40px;
  height: 40px;
}
.itemStateRight {
  background: url("/static/B1/homePage/evaluation/tab-right.png") no-repeat
    center;
  background-size: 100% 100%;
}
.active {
  background: url("/static/B1/homePage/evaluation/tab-left-click.png") no-repeat
    center;
  background-size: 100% 100%;
}
.activeR {
  background: url("/static/B1/homePage/evaluation/tab-right-click.png")
    no-repeat center;
  background-size: 100% 100%;
}
.allComponent {
  height: 87%;
  overflow: hidden;
  // overflow:auto;
}
</style>
